<template>
    <div class="project-box">
        <div class="project-title">
            <div class="project-title-box">
                <div class="project-title-text">{{porject.title}}</div>
            </div>
            <div class="project-switch-box">
                <el-button v-if="porject.ownerUser == loginUser" size="mini" style="float: right;"
                    @click="openProjectDetail" circle icon="el-icon-edit-outline"></el-button>
            </div>
        </div>
        <br>
        <div class="project-content">
            <div class="project-description">
                <h4>项目简介</h4>
                <el-divider></el-divider>
                <div class="project-description-text">{{porject.description}}</div>
            </div>
            <div class="project-apicount">
                <h4>
                    API数量
                    <el-button size="mini" style="float: right;" circle icon="el-icon-refresh"></el-button>
                </h4>
                <el-divider></el-divider>
                <span class="preparation">
                    <i class="el-icon-caret-right"></i>
                    设计中({{apiStatus.preparation}})
                </span>
                <br> <br>
                <span class="underway">
                    <i class="el-icon-caret-right"></i>
                    进行中({{apiStatus.underway}})
                </span>
                <br>
                <br>
                <span class="BUG">
                    <i class="el-icon-caret-right"></i>
                    异常({{apiStatus.BUG}})
                </span>
                <br>
                <br>
                <span class="complete">
                    <i class="el-icon-caret-right"></i>
                    已完成({{apiStatus.complete}})
                </span>
                <br>
                <br>
                <span class="deprecated">
                    <i class="el-icon-caret-right"></i>
                    已废弃({{apiStatus.deprecated}})
                </span>
                <br>
                <br>
            </div>
            <div class="project-user">
                <h4>
                    项目成员
                    <el-button v-if="porject.ownerUser == loginUser" size="mini" style="float: right;"
                        @click="editProjectUser = true" circle icon="el-icon-edit-outline"></el-button>
                </h4>
                <el-divider></el-divider>
                <div class="userItem" v-for="(item, index) in user" :key="index">
                    <img :src="item.avaterStr" alt="">
                    <div class="username">{{item.nickname}}</div>
                </div>

            </div>
        </div>
        <el-drawer title="编辑项目信息" destroyOnClose size="380px" :visible.sync="editProjectDetail" :with-header="false">
            <projectDetail :closeEvent="closeEvent" :porject="porject"></projectDetail>
        </el-drawer>

        <el-drawer title="编辑项目成员" destroyOnClose size="380px" :visible.sync="editProjectUser" :with-header="false">
            <userList :closeEvent="closeEvent" :ownerUser="porject.ownerUser"></userList>
        </el-drawer>
    </div>
</template>
<script>
    import projectDetail from './projectDetail';
    import userList from './userList';

    export default {
        components: {
            projectDetail,
            userList
        },
        data() {
            return {
                editProjectUser: false,
                editProjectDetail: false,
                projectId: null,
                loginUser: '',
                porject: {
                    title: '测试项目',
                    description: '这是一个注释',
                    ownerUser: '',
                },
                mainPermission: 'Admin',
                apiStatus: {
                    'preparation': 0,
                    'underway': 0,
                    'BUG': 0,
                    'complete': 0,
                    'deprecated': 0,
                },
                user: [],
                allUser: [
                    { userId: 1, username: 'DevSpeed', userHeader: '', permission: 'Admin' },
                    { userId: 2, username: 'DevSpeed1', userHeader: '', permission: 'Looker' },
                    { userId: 3, username: 'DevSpeed2', userHeader: '', permission: 'developer' },
                ],
                premission: [
                    { label: '管理员', value: 'Admin' },
                    { label: '只读', value: 'Looker' },
                    { label: '可读写', value: 'developer' },
                ],
            }
        },
        async mounted() {
            // if (window.hasOwnProperty('titlebar')) {
            //     titlebar.titlebar.style.left = '70px';
            // };

            if (this.ClientApi) {
                var projectId = _$Events.config.winConfig.projectId;
                this.projectId = projectId;
                this.loginUser = _$Events.config.userInfo.userId;
                // 获取项目信息
                var projectObj = await this.ClientApi.project.getProjectDetail(projectId);
                if (projectObj.type == 'success') {
                    this.porject = {
                        projectId: projectId,
                        title: projectObj.res.title,
                        description: projectObj.res.description,
                        ownerUser: projectObj.res.ownerUser,
                    };
                } else {
                    this.$message({
                        message: '获取项目信息失败',
                        type: 'warning'
                    });
                };
                // 获取项目用户信息
                this.getProjectUser();
            };
        },
        methods: {
            async getProjectUser() {
                var projectUserList = await this.ClientApi.project.getProjectUser(this.projectId);
                if (projectUserList.type == 'success') {
                    for (let i = 0; i < projectUserList.res.length; i++) {
                        const element = projectUserList.res[i];
                        element.avaterStr = require('../assets/user/' + element.avater);
                    };
                    this.user = projectUserList.res;
                } else {
                    this.$message({
                        message: '获取项目用户列表失败',
                        type: 'warning'
                    });
                };
            },
            openProjectDetail() {
                this.editProjectDetail = true;
            },
            closeEvent(str, data) {
                if (str == 'projectUpdate') {
                    this.porject.title = data.title;
                    this.porject.description = data.description;
                } else if (str == 'projectUserUpdate') {
                    this.getProjectUser();
                };
                this.editProjectDetail = false;
                this.editProjectUser = false;
            },
        },
    }
</script>
<style>
    .project-box {
        border-top:1px solid #DCDFE6 ;
        position: absolute;
        top: 30px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        padding: 20px 40px 40px 40px;
    }

    .project-box h4 {
        margin: 10px 0;
    }

    .project-box .project-title {
        height: 60px;
        position: relative;
        border-bottom: 1px solid #DCDFE6;
    }

    .project-box .project-title-box {
        position: absolute;
        height: 60px;
        top: 0px;
        left: 0px;
        right: 200px;
    }

    .project-box .project-refresh-box {
        position: absolute;
        width: 50px;
        right: 120px;
        top: 10px;
    }

    .project-box .project-switch-box {
        position: absolute;
        width: 90px;
        top: 20px;
        right: 0px;
    }

    .project-box .project-switch-text {
        font-size: 14px;
        line-height: 24px;
        color: #999;
    }

    .project-box .el-button {
        margin: -2px 5px 0 0;
    }

    .project-box .project-title-box .project-title-text {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        border-image: none;
        font-weight: bold;
    }

    .project-box .el-divider {
        margin: 0px 0 10px 0;
    }

    .project-box .project-content {
        position: relative;
    }

    .project-box .project-apicount {
        position: absolute;
        width: 200px;
        right: 220px;
        top: 0px;
    }

    .project-box .project-user {
        position: absolute;
        width: 200px;
        right: 0px;
        top: 0px;
    }

    .project-box .project-description {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 440px;
    }

    .project-box .userItem {
        width: 200px;
        height: 70px;
        position: relative;
    }

    .project-box .userItem img {
        position: absolute;
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        top: 10px;
        left: 10px;
    }

    .project-box .userItem .username {
        position: absolute;
        left: 70px;
        height: 50px;
        top: 10px;
        right: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 50px;
    }
</style>